<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>游记明细</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/plugins/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/plugins/jquery/jquery.min.js"></script>
    <script src="/js/plugins/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/travelContent.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/common.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <!-- 插件核心-->
    <script src="/js/plugins/eleditor/Eleditor.min.js"></script>
    <!-- 如果需要图片上传 -->
    <script src="/js/plugins/eleditor/webuploader.min.js"></script>
    <script>
        $(function () {
            //定义方法,判断当前是否登录
            var user = JSON.parse(sessionStorage.getItem("user"));
            console.log(user);

            //定义的函数,没有登录不能访问
            function ifLogin() {
                if (!user) {
                    window.location.href = 'login.html';
                }
            }

            //点赞按钮
            $("#likeBtn").click(function () {
                //如果没有用户则必须跳转到登录页面,只有登录用户才可以点赞
                if (user == null) {
                    window.location.href = 'login.html';
                }
            })

            //收藏按钮
            $("#collectBtn").click(function () {
                //登录之后才可以收藏
                if (user == null) {
                    window.location.href = 'login.html';
                }
            })

            //游记作者id
            var authorId;

            var params = getParams();
            if (params.id) {
                //获取游记相关信息
                $.get('/travels/' + params.id, function (data) {

                    authorId = data.result.author.id;

                    //根据游记作者id获取作者粉丝数量
                    $.get('/users/' + authorId, function (data) {
                        $('#fans').html(data.result.fans);
                    });

                    //查询游记数量
                    $.get('/users/' + authorId + '/travelsCount', function (data) {
                        $('#travelCount').html(data);
                    });

                    //查询是否关注
                    if (user) {
                        $.get('/users/' + user.id + '/' + authorId, function (data) {
                            if (user.id == authorId) {
                                $('#followBtn').html('自己');
                            } else {
                                if (data) {
                                    $('#followBtn').html('取关');
                                } else {
                                    $('#followBtn').html('关注');
                                }
                            }
                        });
                    } else {
                        $('#followBtn').html('关注');
                    }

                    //关注按钮点击事件
                    $('#followBtn').click(function () {
                        if (user) {
                            if (user.id == authorId) {
                                $(document).dialog({
                                    type: 'notice',
                                    infoText: '关注自己干哈?',
                                    autoClose: 1000,
                                    position: 'center'  // center: 居中; bottom: 底部
                                });
                            } else {
                                if ($('#followBtn').html() == '取关') {
                                    $("#followBtn").html("关注");
                                    $(document).dialog({
                                        type: 'notice',
                                        infoText: '取消关注√',
                                        autoClose: 1000,
                                        position: 'center'  // center: 居中; bottom: 底部
                                    });
                                    $.ajax({
                                        url: "/users/" + user.id + "/" + authorId,
                                        method: "delete"
                                    })
                                } else {
                                    $('#followBtn').html('取关');
                                    $(document).dialog({
                                        type: 'notice',
                                        infoText: '关注√',
                                        autoClose: 1000,
                                        position: 'center'  // center: 居中; bottom: 底部
                                    });
                                    $.ajax({
                                        url: "/users/" + user.id + "/" + authorId,
                                        method: "post"
                                    });
                                }
                            }
                        } else {
                            window.location.href = 'login.html';
                        }

                    });

                    $('.travels').renderValues(data.result, {
                        getPerson: function (item, value) {
                            var html;
                            if (value == 1) {
                                html = '一个人的旅行';
                            } else if (value == 2) {
                                html = '和父母';
                            } else if (value == 3) {
                                html = '和朋友';
                            } else if (value == 4) {
                                html = '和同事';
                            } else if (value == 5) {
                                html = '和爱人';
                            } else if (value == 6) {
                                html = '和其他';
                            }
                            $(item).html(html);
                        },
                        'getAddress': function (item, value) {
                            var add = $(item).data('href');
                            $(item).attr('href', add + value);
                        }
                    });

                    //通过当前登录用户和当前游记id收藏当前游记
                    if (user) {
                        //查询当前用户是否收藏
                        $.ajax({
                            async: false,
                            url: "/myCollections",
                            method: "get",
                            data: {
                                travelId: params.id,
                                userId: user.id
                            },
                            success: function (data) {
                                if (data.success) {
                                    $("#collectBtn").css("color", "red");
                                } else {
                                    $("#collectBtn").css("color", "rgb(33,37,41)");
                                }
                            }
                        });
                        //收藏
                        //添加点击事件
                        $("#collectBtn").click(function () {
                            $.post('/myCollections', {'travelId': params.id, 'userId': user.id}, function (data) {
                                if (data.success) {
                                    $("#collectBtn").css("color", "red");
                                    $(document).dialog({
                                        type: 'notice',
                                        infoText: '收藏成功',
                                        autoClose: 800,
                                        position: 'center'
                                    })
                                } else {
                                    $("#collectBtn").css("color", "rgb(33,37,41)");
                                    $(document).dialog({
                                        type: 'notice',
                                        infoText: '取消收藏',
                                        autoClose: 800,
                                        position: 'center'
                                    })
                                }
                            })
                        })

                    }


                    //通过登录的用户id和页面用户的id
                    if (user) {
                        //查询当前用户是否有点赞当前游记
                        $.ajax({
                            //async:异步
                            async: false,
                            url: "/likes",
                            method: "get",
                            data: {
                                travelId: params.id
                            },
                            success: function (data) {
                                if (data.success) {
                                    $("#likeBtn").css("color", "red");
                                } else {
                                    $("#likeBtn").css("color", "rgb(33,37,41)");
                                }
                            }
                        });
                        //点赞
                        //添加点击事件
                        $("#likeBtn").click(function () {
                            $.post('/likes', {'travelId': params.id}, function (data) {
                                if (data.success) {
                                    $("#likeBtn").css("color", "red");
                                    //取消点赞按钮数字加一
                                    $("#likeBtn").html(parseInt($("#likeBtn").html()) + 1);
                                    $(document).dialog({
                                        type: 'notice',
                                        infoText: '点赞成功',
                                        autoClose: 800,
                                        position: 'center'
                                    })
                                } else {
                                    $("#likeBtn").css("color", "rgb(33,37,41)");
                                    //取消点赞按钮数字减一
                                    $("#likeBtn").html(parseInt($("#likeBtn").html()) - 1);
                                    $(document).dialog({
                                        type: 'notice',
                                        infoText: '取消点赞',
                                        autoClose: 800,
                                        position: 'center'
                                    })
                                }
                            })

                        })
                    }
                })
            }

            //评论按钮添加点击事件
            $("#commentBtn").click(function () {
                //判断是否已经登录
                ifLogin();
                window.location.href = "/mine/travelComments.html?travelId=" + params.id;
            });
        })

    </script>
</head>
<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
        </div>
    </div>
</div>

<div class="travels">
    <img class="cover" render-src="coverUrl">
    <div class="container">
        <h6 class="title" render-html="title"></h6>
        <small>
            <span render-html="createTime"></span>
            浏览 <span> 0</span>
            回复 <span> 0</span>
        </small>
        <div class="row">
            <div class="col-2 img">
                <a data-href="userProfiles.html?id=" render-key="author.id" render-fun="getAddress">
                    <img class="rounded-circle" render-src="author.headImgUrl">
                </a>
            </div>
            <div class="col-6 mine">
                <small>
                    <a data-href="userProfiles.html?id=" render-key="author.id" render-fun="getAddress">
                        <span render-html="author.nickName"></span>
                    </a>
                    <button class="btn btn-success" id="followBtn">关注</button>
                    <br>
                    <span id="travelCount"></span>篇游记
                    <span id="fans"></span>粉丝
                </small>
            </div>
            <div class="attention col">
                <span class="addr" render-html="place.name"></span>
            </div>
        </div>
    </div>
    ,
    <div class="container">
        <fieldset>
            <legend>我的出行信息</legend>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-calendar"></i> 出发时间 <span render-html="travelTime"></span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-money"></i> 人均费用
                    <span render-html="perExpends">120</span></div>
            </div>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-user-circle"></i> 人物
                    <span render-key="person" render-fun="getPerson"></span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-clock-o"></i> 出行天数
                    <span render-html="days">1</span>
                </div>
            </div>
        </fieldset>

        <div class="content" render-html="travelContent.content">

        </div>
    </div>
    <hr>

    <div class="container d-flex">
        <div class="p-2  flex-fill">
            <i class="fa fa-heart-o" id="likeBtn" render-html="likeCount"> </i>
        </div>
        <div class="p-2  flex-fill"><i class="fa  fa-commenting-o" id="commentBtn" render-html="commentCount"> </i>
        </div>
        <div class="p-2  flex-fill"><i class="fa fa-star" id="collectBtn"> </i>
        </div>
    </div>
</div>
<script>

</script>
</body>
</html>